<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购商城-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <!-- 1.引入样式表: 注意引入顺序 -->
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公用样式表 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/slider.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="./css/头部页脚模板.css">
    <link rel="stylesheet" href="./css/产品列表..css">
    <script src="./lib/slider/jquery-1.11.0.js"></script>
    <script src="./js/产品列表.js"></script>
    <script>
        $(function(){
            // 海报右边的手风琴
            $("#banner .ebook_right>ul>li").mouseenter(function(){
                $(this).addClass("li_height").find("img").addClass("r_tu")
                $(this).siblings().removeClass("li_height").find("img").removeClass("r_tu")
           })

           
            // 新书上架的手风琴
           $("#newbox .ebook_right>ul>li").mouseenter(function(){
               $(this).find("h3").addClass("title_hide")
               $(this).find("div").addClass("book_show")

               $(this).siblings().find("h3").removeClass("title_hide")
               $(this).siblings().find("div").removeClass("book_show")
           })

        //    猜你喜欢的切换栏
        $("#extension .tuiguang_btn span").click(function(){
                let index=$(this).index()
                $("#extension .tuiboxs").eq(index)
                .addClass("show3").siblings().removeClass("show3")
            })

            
        })
    </script>
</head>
<body>
    <!-- 1.头部 -->
    <div id="header">
        <!-- 1.顶部 -->
        <div class="top bgc10">
            <!-- 版心 -->
            <div class="container ce6 ti210">
                legochina.cn
                <div class="fr">
                    欢迎光临
                    <span class="cf60">乐购</span>，请
                    <a href="#" class="ce6">登陆</a>\
                    <a href="#" class="cf60">注册</a>
                </div>
            </div>
        </div>
        <!-- 2.菜单 -->
        <div class="container rel">
            <!-- 1.logo -->
            <img src="./imgs/王者荣耀的logo.png" alt="" class="logo abs">
            <!-- 2.搜索+购物车 -->
            <div class="clearfix ptb420">
                <!-- 购物车 -->
                <div class="fr shopCar tcenter font16">
                    <a href="#">
                        购物车
                        <span>3</span>
                    </a>
                    <a href="#">我的订单</a>
                </div>
                <!-- 搜索框 -->
                <form action="#" class="fr search mr35">
                    <input type="text" value="创意文具" class="ti5 cbf font16 fl">
                    <input type="submit" class="btn fl">
                </form>
            </div>
            <!-- 3.导航 -->
            <ul class="nav font16 clearfix">
                <li>
                    <a href="#">图书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部结束 -->

    
    <!-- banner海报区域开始 -->
    <div id="banner" class="container clearfix">
          <!--轮播开始-->
        <div class="pptbox fl" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
            <li>
                <img src="imgs/千年之狐.jpg" />
            </li>
            <li>
                <a href="#"></a><img src="./imgs/冰封战神.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/地狱之眼.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/至尊宝.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/花木兰原画.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/王者对战加载.png" /></a>
            </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls" id="zls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
         <!--轮播结束-->
         <!-- ebook右边 -->
        <div class="ebook_right fr">
            <h2>热卖畅销</h2>
            <ul>
                <li class="clearfix li_height">
                    <span class="ebook_span">1</span>
                    <div class="clearfix ">
                        <img src="./imgs/index08_05.jpg" alt="" class="fl r_tu">
                        <p class="fl">
                            哈哈哈哈
                        </p>
                    </div>
                </li>
                <script>
                    for(let i=1;i<7;i++){
                        document.write(`
                        <li class="clearfix">
                            <span class="ebook_span">${i+1}</span>
                            
                            <div class="clearfix">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <p class="fl">
                                    芜湖起飞
                                </p>
                            </div>
                        </li>
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>
        <!-- 横图logo开始 -->
    <div class="hengtu container">
       <a href="#"> <img src="./imgs/开始游戏.png" title="开始游戏" alt=""></a>
    </div>
    <!-- banner海报区域开始结束 -->

    <!-- 乐购图书折扣区开始 -->
    <div id="books" class="container">
        <!-- 上面的 -->
        <div class="books_top">
            <p>乐购图书折扣区</p>
        </div>
        <!-- 下面的 -->
        <div class="tuiboxs show3">
           
            <ul class="clearfix">
                
                <script>
                    for(let i=0;i<10;i++){
                        if(i<5){
                            document.write(`
                    <li class="bgc_li">
                    <i>
                        <img src="./imgs/狗4.jpg" width="150px" height="150px" alt="">
                    </i>
                    <div>
                        <span><img src="./imgs/limitTime.jpg" alt=""></span>
                    </div>
                    <p>瞅你咋地</p>
                    <p>推荐:⭐⭐⭐⭐⭐</p>
                    <h2>$:1000</h2>
                    
                    </li>
                    `)
                    }else{
                        document.write(`
                        <li class="bgc_li">
                    <i>
                        <img src="./imgs/狗1.jpg" width="150px" height="150px" alt="">
                    </i>
                    <div>
                        <span><img src="./imgs/limitTime.jpg" alt=""></span>
                    </div>
                    <p>还有这种操作?</p>
                    <p>推荐:⭐⭐⭐⭐⭐</p>
                    <h2>$:999</h2>
                    
                    </li>
                    `)
                    }
                    }
                </script>
            </ul>
        </div>
    </div>
    <!-- 乐购图书折扣区结束 -->

    <!-- 新书上架开始 -->
    <div id="newbox" class="container clearfix">
        <!-- 左边部分开始 -->
        <p><span>新</span>书上架</p>
        <div class="newbox_l fl">
            <ul class="clearfix">
                
                <script>
                    for(let i=0;i<10;i++){
                        if(i<5){
                            document.write(`
                    <li class="bgc_li">
                    <i>
                        <img src="./imgs/狗王.jpg" width="150px" height="150px" alt="">
                    </i>
                    
                    <p>瞅你咋地</p>
                    <p>推荐:⭐⭐⭐⭐⭐</p>
                    <h2>$:1000</h2>
                    
                    </li>
                    `)
                    }else{
                        document.write(`
                        <li class="bgc_li">
                    <i>
                        <img src="./imgs/狗2.jpg" width="150px" height="150px" alt="">
                    </i>
                    
                    <p>还有这种操作?</p>
                    <p>推荐:⭐⭐⭐⭐⭐</p>
                    <h2>$:999</h2>
                    
                    </li>
                    `)
                    }
                    }
                </script>
            </ul>
        </div>

        <!-- 右边部分开始 -->
        <div class="ebook_right fr">
            <h2>王者大神榜</h2>
            <ul>
                <li>
                    <span>1</span>
                    <h3 class="title_hide">哈哈哈哈哈哈哈啊哈哈</h3>
                    <div class="clearfix book_show">
                        <img src="./imgs/太乙真人.png"  alt="" class="fl">
                    <p class="fl" style="color: red; font-size: 18px;" >
                        看见这个人了吗,碰到他就直接点投降吧,这是你惹不起的⟸⟸⟸
                    </p>
                    </div>
                </li>
                <script>
                    for(let i=1;i<8;i++){
                        document.write(`
                        <li>
                            <span>${i+1}</span>
                            <h3 class="">哈哈哈哈哈哈哈啊哈哈</h3>
                            <div class="clearfix">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                            <p class="fl">
                                从你的世界路过
                                入选央视“2014中国好书”的80后作品！
                                十年华语畅销小说，王家卫陈国富倾力推荐， 
                                1500万次转发，超4亿次阅读
                            </p>
                            </div>
                        </li>
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>
    <!-- 新书上架结束 -->

    <!-- 独家提供开始 -->
    <div id="Exclusive" class="tuiguang container clearfix">
        <div class="tuiguang_top clearfix">
            <p class="title fl"><span>独</span><b>家提供</b></p>
            <div class="tuiguang_btn fl clearfix">
            <span class="m_span">货币金融</span>
            <span>社会文学</span>
            <span>科学技术</span>
            <span>儿童文学</span>
            <span>教学参辅</span>
            <span>生活</span>
            <span>小说</span>
            <span>动画</span>
            </div>
        </div>
        <!--轮播开始-->
        
        <!-- 第一个 -->
        <div class="Exclusive_btm pptbox fl show9" id="Exclusive_box">
        <!--轮播的内容-->
        <ul class="innerwrapper">
        <li>
            <img src="imgs/千年之狐.jpg" />
        </li>
        <li>
            <a href="#"></a><img src="./imgs/冰封战神.png" /></a>
        </li>
        <li>
            <a href="#"><img src="./imgs/地狱之眼.png" /></a>
        </li>
        <li>
            <a href="#"><img src="./imgs/至尊宝.png" /></a>
        </li>
        <li>
            <a href="#"></a><img src="./imgs/冰封战神.png" /></a>
        </li>
        <li>
            <a href="#"><img src="./imgs/花木兰原画.png" /></a>
        </li>
        <li>
            <a href="#"><img src="./imgs/王者对战加载.png" /></a>
        </li>
        <li>
            <a href="#"><img src="./imgs/地狱之眼.png" /></a>
        </li>
        </ul>
        <!--数字控制器-->
        <ul class="controls" id="zls">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        </ul>
        <!--按钮控制器-->
        <span class="btnleft"></span>
        <span class="btnright"></span>
        </div>
        <!-- 第二个 -->
        <div class="Exclusive_btm pptbox fl" id="Exclusive_box">
            <!--轮播的内容-->
            <ul class="innerwrapper">
            <li>
                <img src="./imgs/至尊宝.png" />
            </li>
            <li>
                <a href="#"></a><img src="./imgs/冰封战神.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/地狱之眼.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/至尊宝.png" /></a>
            </li>
            <li>
                <a href="#"></a><img src="./imgs/冰封战神.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/花木兰原画.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/王者对战加载.png" /></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/地狱之眼.png" /></a>
            </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls" id="zls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
    
        
        <!--轮播结束-->
    </div>
    <!-- 独家提供结束 -->


    <!-- 猜你喜欢开始 -->
    <div id="extension" class="tuiguang container clearfix">
    <div class="tuiguang_top clearfix">
    <p class="title fl"><span>猜</span><b>你喜欢</b></p>
    <div class="tuiguang_btn fr clearfix">
    <span class="yuan fl"><img src="./imgs/换一批.jpg" alt=""></span>
    <span class="fl huan">换一批</span>
    </div>
</div>

<!-- 第一个 -->
<div class="tuiboxs fl show3">
    <ul class="clearfix">
        <script>
            for(let i=0;i<12;i++){
                if(i<6){
                    document.write(`
            <li class="bgc_li">
            <i>
                <img src="./imgs/狗王.jpg" width="150px" height="150px" alt="">
            </i>
            <p>Pigeon法国制奶嘴,无毒天然乳胶</p>
            <h2>$:189</h2>
            <div>
                <span></span>已有<b style="color: red;">988</b> 条评论
            </div>
            </li>
            `)
            }else{
                document.write(`
            <li class="bgc_li">
            <i>
                <img src="./imgs/狗2.jpg" width="150px" height="150px" alt="">
            </i>
            <p>Pigeon法国制奶嘴,无毒天然乳胶</p>
            <h2>$:189</h2>
            <div>
                <span></span>已有<b style="color: red;">988</b> 条评论
            </div>
            </li>
            `)
            }
            }
        </script>
    </ul>
</div>
<!-- 第二个 -->
<div class="tuiboxs fl">
    <ul class="clearfix">
        <script>
            for(let i=0;i<12;i++){
                if(i<6){
                    document.write(`
            <li class="bgc_li">
            <i>
                <img src="./imgs/狗2.jpg" width="150px" height="150px" alt="">
            </i>
            <p>Pigeon法国制奶嘴,无毒天然乳胶</p>
            <h2>$:189</h2>
            <div>
                <span></span>已有<b style="color: red;">988</b> 条评论
            </div>
            </li>
            `)
            }else{
                document.write(`
            <li class="bgc_li">
            <i>
                <img src="./imgs/狗王.jpg" width="150px" height="150px" alt="">
            </i>
            <p>Pigeon法国制奶嘴,无毒天然乳胶</p>
            <h2>$:189</h2>
            <div>
                <span></span>已有<b style="color: red;">988</b> 条评论
            </div>
            </li>
            `)
            }
            }
        </script>
    </ul>
</div>
    </div>
    <!-- 猜你喜欢结束 -->

    <!-- 人文社科精选开始 -->
    <div class="buttom_logo container">
        <ul class="clearfix">
            <li>
                <img src="./imgs/心理学2.png" alt="">
            </li>
            <script>
                for(let i=1;i<6;i++){
                    document.write( ` 
                    <li>
                        <img src="./imgs/心理学2.png" alt="">
                    </li>
                    `)
                }
            </script>
        </ul>
    </div>
    <!-- 人文社科精选结束 -->

    <!-- 横图logo开始 -->
    <div class="hengtu container">
        <a href="#"> <img src="./imgs/开始游戏.png" title="开始游戏" alt=""></a>
     </div>
     <!-- 横图logo结束 -->


    <!-- 10.页脚开始 -->
    <div class="fengexian">
        
    </div>
    <!-- 页脚的4个Logo开始 -->
    <div class="tupians">
        <div class="sss container clearfix">
            <div class="ss">
                <div class="s1 fl"></div>
                <div class="s2 fl"></div>
                <div class="s3 fl"></div>
                <div class="s4 fl"></div>
            </div>
        </div>
    </div>
    <div id="footer" class="container">
        <div class="zhinan">
            <div class="inboxs clearfix">
                <ul>
                    <p>购物指南</p>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                    <p>购物指南</p>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                    <p>购物指南</p>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                    <p>购物指南</p>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                    <p>购物指南</p>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                   
                </ul>
            </div>
            <div class="logo2"></div>
        </div>
            <!-- 页脚的购物指南结束 -->
            <!-- 页脚最下面的开始 -->
        <div class="font1">
            <ul class="clearfix">
                <li><a href="">公司简介</a></li>
                <li><a href="">lnvestor Relations</a></li>
                <li><a href="">网站联盟</a></li>
                <li><a href="">乐购招商</a></li>
                <li><a href="">机构销售</a></li>
                <li><a href="">手机乐购</a></li>
                <li><a href="">官方Blog</a></li>
                <li><a href="">热词搜索</a></li>
            </ul>
            <p>Copyright&emsp;(C)&emsp;乐购网&nbsp;2004-2016,&emsp;All&nbsp;Reserved</p>
        </div>
    </div>
    <!-- 页脚结束 -->



<!-- ********************************************** -->
    <script src="./lib/slider/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <!--插件库-->
    <script src="./lib/slider/slider.js" type="text/javascript" charset="utf-8"></script>
</body>